<template>
  <div class="first-tab">
    <div class="backbtn" @click="backto()">返回任务列表</div>
    <div class="tablistbox">
      <a
        href="javascript:void(0);"
        :class="index == isactive ? 'active' : ''"
        @click="handelchange(index)"
        :key="index"
        v-for="(item, index) in tablist"
        >{{ item.name }}</a
      >
    </div>
    <info :is="currentView" keep-alive></info>
  </div>
</template>

<script>
import info from './firsttabs/info.vue';
import intro from './firsttabs/intro.vue';
import Executor from './firsttabs/Executor.vue';
import Reviewer from './firsttabs/Reviewer.vue';
import {getSelectTaskStatus, getSelectProjectType, getSelectTaskSummary} from '@/api/task/task.js';

export default {
  name: 'first-tab',
  data() {
    return {
      isactive: this.$route.params.index ? this.$route.params.index : 0,
      tablist: [],
      currentView: this.$route.params.currentView ? this.$route.params.currentView : 'info',
      taskStatus: null,
      selectTaskSummaryList: {},
      projectType: null // 项目类型
    };
  },
  components: {
    info,
    intro,
    Executor,
    Reviewer
  },
  created() {
    this.getSelectTaskStatus();
    setTimeout(() => { // 弹框嵌套图表-请求数据有延迟
      this.getUserType();
    }, 500);
  },
  methods: {
    // 任务状态
    async getSelectTaskStatus() {
      const {data} = await getSelectTaskStatus({taskId: parseInt(localStorage.getItem('taskId'))});
      this.taskStatus = data;
      // 获取任务概况
      const {data: data1} = await getSelectTaskSummary({taskId: parseInt(localStorage.getItem('taskId'))});
      this.selectTaskSummaryList = data1;
      // 获取项目属性
      const {data: data2} = await getSelectProjectType({projectId: parseInt(data1.projectId)});
      this.projectType = data2;
      // console.log(this.selectTaskSummaryList);
    },
    // 登录人类型
    getUserType() {
      if (parseInt(sessionStorage.getItem('usertype')) !== 1) {
        if (parseInt(sessionStorage.getItem('usertype')) !== 4) {
          this.tablist = [
            {name: '任务概况'},
            {name: '任务介绍'}
          ];
        } else {
          if (this.taskStatus === 1) {
            this.tablist = [
              {name: '任务概况'}
            ];
          } else {
            this.tablist = [
              {name: '任务概况'},
              {name: '任务介绍'}
            ];
          }
        }
      } else {
        this.tablist = [
          {name: '任务概况'},
          {name: '任务介绍'},
          {name: '执行人问卷'},
          {name: '审核人问卷'}
        ];
      }
    },
    // --------------------------
    handelchange(index) {
      this.isactive = index;
      if (index === 0) {
        this.currentView = 'info';
      } else if (index === 1) {
        this.currentView = 'intro';
      } else if (index === 2) {
        this.currentView = 'Executor';
      } else if (index === 3) {
        this.currentView = 'Reviewer';
      }
    },
    backto() {
      // this.$router.back();
      // console.log(id);
      if (this.selectTaskSummaryList.projectId !== null) {
        if (this.projectType === 1) {
          this.$router.push({
            name: 'Prodetail',
            params: {
              index: 2,
              projectLabel: this.selectTaskSummaryList.projectLabel,
              currentView: 'tasklist'
            }
          });
          localStorage.setItem('projectId', this.selectTaskSummaryList.projectId);
        } else {
          this.$router.push({
            name: 'Agileproject',
            params: {
              index: 2,
              projectLabel: this.selectTaskSummaryList.projectLabel,
              currentView: 'demandlist'
            }
          });
          localStorage.setItem('projectId', this.selectTaskSummaryList.projectId);
        }
      } else {
        this.$router.replace('/task');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.first-tab {
  margin: 0 20px;
  margin-top: 20px;
  position: relative;
  margin-bottom: 20px;
  .backbtn {
    position: absolute;
    right: 0;
    top: 20px;
    color: #555;
    font-size: 16px;
    cursor: pointer;
  }
  a {
    color: #555;
    width: 138px;
    height: 47px;
    border: 1px solid #ececec;
    line-height: 45px;
    font-size: 14px;
    text-align: center;
    background: #ffffff;
    // border-radius: 8px 8px 0px 0px;
    display: inline-block;
    box-shadow: 0px 0px 1px 0px #99999980;
  }
  .active {
    position: relative;
    width: 138px;
    height: 55px;
    line-height: 55px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px 8px 0px 0px;
    border-bottom: none;
    box-shadow: 1px -2px 3px 0 #99999980;
  }
}
</style>
